<template>
    <div>
        <el-table :data="result" border style="width: 100%">
            <el-table-column prop="name" label="姓名">
            </el-table-column>

            <el-table-column prop="department" label="部门">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="del(scope.$index)" type="text" size="small">移出</el-button>
                </template>
            </el-table-column>

        </el-table>
        <br>
        <el-cascader v-model="selectValue" :options="options"></el-cascader>
        <el-button type="primary" size="small" @click="add">添加</el-button>
        <br>
        <el-button type="primary" size="small" @click="setPerson">保存</el-button>
    </div>
</template>
  
<script lang="ts" setup>
import userApi from "@/api/user.js"
import { ref, Ref } from "vue"
import { ElTable, ElTableColumn, ElButton, ElCascader } from "element-plus"

let selectValue = ref([]);
let options: Ref<any> = ref([]);
let result: Ref<any> = ref([]);
let lastRes = ref([])
let emit = defineEmits()

function setPerson() {
    emit("setCanSee", result.value)
}

function del(index: number) {
    // console.log(row.$index)
    result.value.splice(index, 1)
}
function add() {
    if (!selectValue.value.length) {
        return
    }
    for (let see of result.value) {
        if (see.id == selectValue.value[1]) {
            return
        }
    }
    result.value.push({
        department: selectValue.value[0],
        name: lastRes.value.map((line) => {
            if (line.id == selectValue.value[1])
                return line.name
        }),
        id: selectValue.value[1]
    })
}


// let arr = JSON.parse(`[${this.$attrs.person}]`)
let arr=[]
userApi.getDepartmentPerson().then((res) => {
    lastRes.value = res.data
    for (let p of res.data) {
        if (!p.id) {
            continue
        }
        let status = false
        options.value.map((line: any) => {
            if (line.value == p.dname) {
                line.children.push({
                    value: p.id,
                    label: p.name,
                })
                status = true
            }
        })
        if (!status) {
            options.value.push({
                value: p.dname,
                label: p.dname,
                children: [{
                    value: p.id,
                    label: p.name,
                }]
            })
        }
    }


    for (let p of arr) {
        lastRes.value.map((line: any) => {
            if (line.id == p) {
                result.value.push({
                    department: line.dname,
                    name: line.name,
                    id: line.id
                })
            }
            console.log(res)
        })
    }
})
</script>
  
<style></style>
  